* {
    margin: 0;
    padding: 0;
}
.matalk {
    width: 100%;
    height: 100%;
    background-color: #007DDB;
}

.matalk-left {
    width: 220px;
    height: 100%;
    background-color: #F8F8F8;
    position: absolute;
    top:20px;
}
.matalk-right{
    height: 100%;
    position: absolute;
    left: 250px;
    right: 10px;
    top:20px;
}
.matalk-left-top{
    width: 210px;
    height: 100%;
    position: absolute;
    top:5px;
    left: 5px;
}
.matalk-left-footer{
    background-color: #E6E6E6;
    position: absolute;
    bottom: 0;
    left: 2px;
    right: 2px;
}
.matalk-right-top{
    background-color: #F2F2F2;
    height: 90%;
    width: 80%;
    position: absolute;
    top:5px;
    left: 5px;
    right: 5px;
}
.matalk-right-b1{
    height: 100%;
    position: absolute;
    right: 20px;
    top:5px;
    float: right;
}
.matalk-right-b2{
    height: 100%;
    position: absolute;
    right: 20px;
    top:50px;
    float: right;
}

.matalk-right-down{
    height: 38%;
    position: absolute;
    bottom: 0;
    left: 5px;
    right: 5px;

}
.matalk-right-down-top{
    height: 50%;
    position: absolute;
    top:5px;
    left: 1px;
    right: 1px;
}
.matalk-right-down-footer{
    background-color:#F2F2F2;
    height: 70%;
    position: absolute;
    bottom: 0;
    left: 1px;
    right: 1px;
}
.tt{
    background-color: #E8E8E8;
    width: 70%;
    height: 50%;
    position: absolute;

}
.fs{
    background-color: #5FB878;
    width: 28%;
    height: 50%;
    position: absolute;
    right:1px;
    float: right;
}
.matalk::after{
    content: '';
    display: block;
    visibility: hidden;
    clear: both
}
.bgcolor{
    background: #93D1FF;
}
.pa {
    padding: 15px;
}